<template lang="html">
    <Panel title="新品推荐" :class="$style.panel">
        <section :class="$style.content">
            <div class="arrow">更多尖货 ></div>
            <Slider :options="options" :items="items" cname="product-slider"></Slider>
        </section>
    </Panel>
</template>
<script>
    import Panel from "../core/panel.vue";
    import Slider from "../core/slider.vue";

    export default {
        components: {
            Panel,
            Slider
        },
        data() {
            return {
                items: [{
                    href: "home",
                    src: "//img12.360buyimg.com/jrpmobile/jfs/t13021/306/1996997425/21953/bda69db3/5a2f6a17N9da099b1.jpg?width=335&height=421",
                }, {
                    href: "home",
                    src: "//img12.360buyimg.com/jrpmobile/jfs/t14125/310/1997192193/46667/3c910f8b/5a2f6a36Nad95b650.jpg?width=335&height=421",
                }, {
                    href: "home",
                    src: "//img12.360buyimg.com/jrpmobile/jfs/t15784/188/381232069/39444/8878571d/5a2f6a4aNbd5a574c.jpg?width=335&height=421",
                }, {
                    href: "home",
                    src: "//img12.360buyimg.com/jrpmobile/jfs/t13963/267/2355123229/48850/254f797a/5a3c59aeN9cb550f6.jpg?width=335&height=421",
                },],
                options: {
                    // pagination: { //指示器轮播图的小圆点
                    //     el: ".swiper-pagination",
                    //     clickable: true,
                    // },
                    slidesPerView: 2.3,//显示几个图片
                    spaceBetween: 30,
                    freeMode: true,
                }
            }
        },
    }
</script>
<style lang="scss">
    /* 引入轮播图组件的样式 */
    .swiper-container {
        box-sizing: border-box;
    }

    .swiper-slide a {
        width: 100%;
    }

    .swiper-slide a img {
        width: 100%;
        display: block;
        height: 314px;
        border: 1px solid #ccc;
    }
</style>
<style lang="scss" module>
    @import "../../css/element.scss";

    .panel {
        @include panel;
    }

    .panel>.content {
        padding-bottom: 40px;
        position: relative;
    }

    .content>div {
        position: absolute;
        font-size: 22px;
        color: #999;
        right: 10px;
        top: -70px;
    }
</style>